<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto Disappearing Alert</title>
<style>
  .alert {
    padding: 15px 20px;
    background-color: #4CAF50;
    color: white;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 50%;
    left: -30%; /* 起始位置在左侧屏幕外 */
    transform: translateY(-50%);
    z-index: 9999;
    opacity: 0; /* 初始时隐藏 */
    animation: fadeInCenterOut 3s ease forwards; /* 使用动画效果 */
  }

  @keyframes fadeInCenterOut {
    0% {
      opacity: 0;
      left: -30%; /* 起始位置在左侧屏幕外 */
    }
    10% {
      opacity: 1;
      left: 50%; /* 移动到屏幕中央位置 */
    }
    90% {
      opacity: 1;
      left: 50%; /* 停留在屏幕中央位置 */
    }
    100% {
      opacity: 0;
      left: 50%; /* 仍然停留在屏幕中央位置 */
    }
  }
</style>
</head>
<body>

<div id="alert" class="alert"></div>

<script>
  function showAlert(message, timeout = 3000) {
    const alertDiv = document.getElementById('alert');
    alertDiv.innerText = message;
    alertDiv.style.display = 'block';
    setTimeout(() => {
      alertDiv.style.display = 'none';
    }, timeout);
  }

  // 示例用法
  showAlert('这是一个自动消失的提示框！', 3000); // 3秒后消失
</script>

</body>
</html>